<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css?cache=<%=Math.random()%>">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>
    <style>
        .title-row {
            line-height: 26px;
        }
        .title-row img {
            width: 12px;
            padding: 0 4px;
        }
        .add {
            display: inline-block;
            padding: 0 20px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            float: right;
            cursor: pointer;
        }
        table {
            text-align: center;
            width: 96%;
            border: 1px solid #dff2f2;
            border-collapse:collapse;
            margin-top: 10px;
        }
        tr {
            width: 100%;
            font-size: 15px;

        }
        tr:nth-child(odd) {
            background-color: #dff2f2;
        }
        tr:last-child {
            border-bottom: 0;
        }
        th {
            background-color: #68cacb;
            line-height: 39px;
            color: #fff;
            font-size: 16px;
        }
        td {
            padding: 5px 0;
        }
        table img {
            width: 40px;
            height: 40px;
        }
        .right_cont_container {
            padding: 20px;
        }
        .del-text {
            cursor: pointer;
        }
        .none {
            display: none;
        }
        .show-block {
            display: block!important;
        }
        .hospital {
            width: 50%;
        }
        .operate {
            width: 20%;
        }
        #demo1 {
            margin-top: 20px;
        }
        .nodata {
            text-align: center;
            margin-top: 220px;
        }
     </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>重点专科</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>专科列表</span>
                        <%--<div class="add">添加</div>--%>
                    </div>
                    <div class="nodata" v-if="nodata">
                        <img src="../img/nodata.png">
                        <div>暂时没有数据</div>
                    </div>
                    <div class="content" v-else>
                        <table>
                            <tr>
                                <th class="dept">科室</th>
                                <th class="hospital">医院</th>
                                <th class="logo">图标</th>
                                <th class="operate">操作</th>
                            </tr>
                            <tr v-for="(index,dept) in deptList">
                                <td>{{dept.dept_name}}</td>
                                <td>{{dept.branch_name}}</td>
                                <td><img :src='dept.json.deptIcon'></td>
                                <td class="del"><span class="del-text" @click="delDept(dept.id,index,dept.json.deptIcon)">删除</span></td>
                            </tr>
                        </table>
                    </div>
                    <div id="demo1"></div>
                    <dell class="none" :class="{'show-block':showDel}"></dell>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<%@ include file="delDept_template.jsp"%>
</html>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            totalPage: "",
            deptList: [],
            showDel: false,
            deptIndex: "",
            nodata: false
        },
        ready: function() {
            var _this = this;
            //eeesysLoading();
            $.ajax({
                type: 'POST',
                url: "deptList.jsp",
                data: {
                    act: "key_specialty",
                    hospital: "1070",
                    isType: "1",
                    pageCount: "10",
                    pageNo: "1"
                },
                success: function (res) {
                    //eeesysLoadingCancel();
                    //console.log(res);
                    res = JSON.parse(res);
                    if(res.errcode == 0) {
                        _this.totalPage = res.count;
                        _this.deptList = res.data;
                        if(res.data.length == 0) {
                            _this.nodata = true;
                        }
                        aa('demo1');
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }
                }
            })
        },
        methods: {
            delDept: function(id,index,icon) {
                this.showDel = true;
                this.deptIndex = index;
                this.$broadcast('getId',{id:id,icon:icon});
            }
        },
        components: {
            dell: delDept
        },
        events: {
            hideDel: function() {
                this.showDel = false;
            },
            successDel: function() {
                var _this = this;
                this.showDel = false;
                this.deptList.splice(this.deptIndex,1);
                //console.log(this.deptList.length);
                if(this.deptList.length == 0) {
                    window.location.reload();
                }
            }
        }
    })
function aa(cont) {
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage;
        layer = layui.layer;
        laypage({
            cont: cont,
            pages: vm.totalPage,
            groups: 5,
            jump: function(obj, first){
                var curr = obj.curr;
                eeesysLoading();
                $.ajax({
                    type: 'POST',
                    url: "deptList.jsp",
                    data: {
                        act: "key_specialty",
                        hospital: "1070",
                        isType: "1",
                        pageCount: "10",
                        pageNo: curr + "",
                    },
                    success: function(res) {
                        eeesysLoadingCancel();
                        //console.log(res);
                        res = JSON.parse(res);
                        if(res.errcode == 0) {
                            vm.totalPage = res.count;
                            vm.deptList = res.data;
                            if(res.data.length == 0) {
                                vm.nodata = true;
                            }
                        } else {
                            layer.open({
                                title: '提示',
                                content: res.errmsg
                            })
                        }
                    }
                })
            }
        })
    })
}
</script>

<script src="../layui/layui.js"></script>